<script setup lang="ts">
import { imagePath, maskStyle } from '@/libs/file-utils'
import { confirm, isAfford, showUnlockMask } from './data'
import { lockedStatus } from '../data'

const img_bg = imagePath('quiz/fortune/result/unlock-mask/bg.png')
const img_logo = imagePath('quiz/fortune/result/unlock-mask/logo.png')
const icon_close = imagePath('icon-close.svg')
const img_btn = imagePath('quiz/fortune/result/unlock-mask/btn.png')
</script>

<template>
  <MaskWrapper v-model:show="showUnlockMask">
    <div
      class="unlock-mask"
      :style="{ backgroundImage: img_bg }"
      @click.stop=""
    >
      <div
        class="logo"
        :style="{ backgroundImage: img_logo }"
      ></div>
      <div
        class="close"
        :style="maskStyle(icon_close)"
        @click="showUnlockMask = false"
      ></div>

      <div class="title">解锁详情版</div>
      <div
        v-if="lockedStatus?.itemId === 0"
        class="info"
      >是否使用<span class="val">1</span>次会员权益解锁详情版~</div>
      <div
        v-else
        class="info"
      >是否花费<span class="val">{{ lockedStatus?.price }}</span>颗蒜瓣解锁详情版~</div>

      <div
        class="btn"
        :style="{ backgroundImage: img_btn }"
        @click="confirm"
      >{{ isAfford ? '确定' : '去充值' }}</div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.unlock-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 714rpx;
  height: 615rpx;

  .logo {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 266rpx;
    height: 290rpx;
  }

  .close {
    position: absolute;
    top: 40rpx;
    right: 50rpx;

    width: 52rpx;
    height: 52rpx;

    background-color: #FF6D88;
    mask-size: 100% 100%;
  }

  color: #7A3C36;

  .title {
    margin-top: 160rpx;
    text-align: center;
    font-size: 64rpx;
    line-height: 86rpx;
  }

  .info {
    width: 512rpx;

    margin: 10rpx auto;

    text-align: center;
    font-size: 48rpx;
    line-height: 74rpx;

    .val {
      color: #FF6D88;
      font-size: 72rpx;
    }
  }

  .btn {
    width: 301rpx;
    height: 125rpx;

    margin: 30rpx auto;

    color: #fff;
    font-size: 48rpx;
    line-height: 110rpx;
    text-align: center;
  }
}
</style>